<script setup>

import Gap from '@/view/ai/components/Gap.vue';
import CardTabs from '@/view/ai/components/CardTabs.vue';
import TitleNameTime from '@/view/ai/components/TitleNameTime.vue';
import SummaryDetail from '@/view/ai/components/SummaryDetail.vue';
import IconTextNumber from '@/view/ai/components/IconTextNumber.vue';
import HorizontalLine from '@/view/ai/components/HorizontalLine.vue';
</script>

<template>
	<div class="wrap">
		<card-tabs :tab-index="0" :label-name="'A'">
			<template #left>
				<div class="left">
					<div class="row1">
						<span class="desc">质量指数：</span>
						<span class="tag">值得学习</span>
					</div>
					<horizontal-line margin-gap="20"/>
					<title-name-time/>
					<gap height="12"/>
					<div class="row2">
						<span class="first">被引用次数：134次</span>
						<span >参考文献：20篇</span>
					</div>
					<horizontal-line margin-gap="20"/>
					<icon-text-number :category="1"/>
				</div>
			</template>
			<template #middle>
				<div class="right">
					<div class="item">
						<summary-detail :line-clamp="8" title="SACA回答："/>
					</div>
				</div>
			</template>
		</card-tabs>
	</div>

</template>

<style scoped lang="scss">
.wrap{
	margin-bottom: 40px;
	.left{
		.row1{
			.desc{
				font-weight: 305;
				font-size: 18px;
				color: #000000;
				line-height: 21px;
			}
			.tag{
				padding: 3px 16px;
				margin-left: 12px;
				background: #00BCFB;
				border-radius: 4px 4px 4px 4px;
				font-size: 14px;
				color: #FFFFFF;
			}
		}
		.row2{
			font-weight: 305;
			font-size: 16px;
			color: #000000;
			line-height: 19px;
			.first{
				margin-right: 32px;
			}
		}
	}
	.right{
		padding: 40px;
	}
}
</style>
